<template>
  <div class="posts">
    <div class="left">
      <button
        :class="{ active: curTab === 'HelloA' }"
        @click="curTab = 'HelloA'"
      >
        HelloA
      </button>
      <button
        :class="{ active: curTab === 'HelloB' }"
        @click="curTab = 'HelloB'"
      >
        HelloB
      </button>
      <button
        :class="{ active: curTab === 'HelloC' }"
        @click="curTab = 'HelloC'"
      >
        HelloC
      </button>
    </div>

    <div class="right">
      <component :is="curTab"></component>
    </div>
  </div>
</template>

<script>
import HelloA from "./HelloA.vue";
import HelloB from "./HelloB.vue";
import HelloC from "./HelloC.vue";

export default {
  components: {
    HelloA,
    HelloB,
    HelloC,
  },

  data() {
    return {
      curTab: "HelloA",
    };
  },
};
</script>

<style scoped>
.posts {
  display: flex;
}

.left {
  display: flex;
  flex-direction: column;
  width: 50px;
}

.right {
  flex: 1;
}
</style>
